<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
</head>
<body>
    <canvas id="canvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '18px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper function to draw a double-arrow dimension line ---
        function drawDimensionLine(ctx, x1, y1, x2, y2, size = 8) {
            const angle = Math.atan2(y2 - y1, x2 - x1);
            const angle2 = Math.atan2(y1 - y2, x1 - x2);

            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);

            // Arrowhead at (x2, y2)
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));

            // Arrowhead at (x1, y1)
            ctx.moveTo(x1, y1);
            ctx.lineTo(x1 - size * Math.cos(angle2 - Math.PI / 6), y1 - size * Math.sin(angle2 + Math.PI / 6));
            ctx.moveTo(x1, y1);
            ctx.lineTo(x1 - size * Math.cos(angle2 + Math.PI / 6), y1 - size * Math.sin(angle2 - Math.PI / 6));
        }

        // --- Geometric parameters ---
        const a_val = 60;
        const b_val = 180;
        const rectWidth = 4 * a_val; // 240
        const rectHeight = b_val;    // 180

        const rectX = (canvas.width - rectWidth) / 2; // 130
        const rectY = 70;
        
        const wireX = rectX + a_val; // 130 + 60 = 190
        const rectRightX = rectX + rectWidth; // 130 + 240 = 370
        const rectBottomY = rectY + rectHeight; // 70 + 180 = 250
        
        // --- Start drawing ---
        ctx.beginPath();

        // 1. Draw the rectangle
        ctx.rect(rectX, rectY, rectWidth, rectHeight);

        // 2. Draw the infinite wire
        ctx.moveTo(wireX, rectY - 30);
        ctx.lineTo(wireX, rectBottomY + 30);
        
        ctx.stroke(); // Stroke the main shapes first

        // 3. Draw the current arrow on the wire
        const currentArrowY = rectY + 60; // y-position of the arrow tip
        ctx.beginPath();
        ctx.moveTo(wireX, currentArrowY); // Tip
        ctx.lineTo(wireX - 5, currentArrowY + 10);
        ctx.moveTo(wireX, currentArrowY);
        ctx.lineTo(wireX + 5, currentArrowY + 10);
        ctx.stroke();

        // 4. Draw dimension lines
        ctx.beginPath();
        // Dimension 'b'
        const dimX_b = rectRightX + 30;
        drawDimensionLine(ctx, dimX_b, rectY, dimX_b, rectBottomY, 10);
        
        // Dimensions 'a' and '3a'
        const dimY = rectBottomY + 30;
        drawDimensionLine(ctx, rectX, dimY, wireX, dimY, 10);
        drawDimensionLine(ctx, wireX, dimY, rectRightX, dimY, 10);

        ctx.stroke(); // Draw all dimension lines and arrows

        // --- Add labels ---
        
        // Label 'I'
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'left';
        ctx.fillText('I', wireX + 10, currentArrowY + 5);

        // Dimension labels
        ctx.font = '18px Times New Roman';
        // Label 'b'
        ctx.textAlign = 'left';
        ctx.fillText('b', dimX_b + 12, rectY + rectHeight / 2);
        // Label 'a'
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('a', rectX + a_val / 2, dimY);
        // Label '3a'
        ctx.fillText('3a', wireX + (3 * a_val) / 2, dimY);
        
        // Chinese text label
        ctx.font = '20px "SimSun", "Songti SC", serif';
        ctx.textBaseline = 'top';
        ctx.fillText('习题 9-2 图', canvas.width / 2, dimY + 30);

    </script>
</body>
</html>